<template>
	<view>
		<uni-nav-bar statusBar @clickLeft='clickLeft()' @clickRight="clickRight()" :border='border' color="#000000"
			fixed backgroundColor='#FFFFFF00' left-icon="left" :title="title">

		</uni-nav-bar>
		<view class="topView">
			<view class="topView1"></view>
			<view v-if="!type" class="flex-column-center" style="margin-bottom: 100rpx;">
				<view class="title">
					当前手机号为
				</view>
				<view class="title1">
					{{userinfo.mobile}}
				</view>
				<view class="title2">
					请验证身份
				</view>
				
			</view>
			<view v-if="type" class="phoneView flex-row-space-between">
				<input v-model='mobile' type="number" placeholder="请输入手机号">
			</view>
			<view class="phoneView flex-row-space-between">
				<input v-model='captcha' type="number" placeholder="请输入短信验证码">
				<view class="flex-row-flex-end">
					<view class="line">
						
					</view>
					<view @click="codeClick()" class="code flex-row-center">
						{{clockText}}
					</view>
				</view>
			</view>
			<view @click="buttonClick()" class="button flex-row-center">
				确认
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	import {
		smsSend,
		smsCheck,
		changemobile
	} from '@/api/login.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				time:0,
				mobile:'',
				captcha:'',
				clock: 60,
				clockText: '获取验证码',
				userinfo:{},
				type:0,
				title: '验证手机号',
				border: false,

			}
		},
		onShow() {

		},
		onLoad() {
		this.userinfo = uni.getStorageSync('userinfo')
		},

		methods: {
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			codeClick(){
				if(this.type){
					if(!this.mobile.length){
					this.showToast('请输入手机号')
					return
					}
					
				}
				if (this.clockText != '获取验证码') {
					return
				}
			
				
				smsSend({
						mobile:this.type?this.mobile:this.userinfo.mobile,
						event: 'changemobile',
					})
					.then(res => {
						this.showToast(res.msg)
						this.daojishi()
					})
					.catch(err => {
				
					})
			},
			daojishi() {
				this.clock = 60;
				var self=this
				this. timer = setInterval(() => {
					this.clock--;
					this.clockText = `${this.clock} 秒`
			
					if (this.clock < 1) {
						clearInterval(timer);
						this.clockText = '获取验证码'
						this.clock = 0
					}
				}, 1000)
			},
			buttonClick(){
						var self=this
				if(this.type){
					
					changemobile({
							mobile:this.mobile,
							captcha: this.captcha,
						})
						.then(res => {
						self.showToast(res.msg)
					setTimeout(()=>{
				self.clickLeft()
					},2000)
						})
					
				}else{
			
					smsCheck({
							mobile:this.userinfo.mobile,
							event: 'changemobile',
							captcha: this.captcha,
						})
						.then(res => {
							clearInterval(self.timer);
							self.timer = null
							this.clockText = '获取验证码'
							this.clock = 0
							this.type=1
							this.captcha=''
							
						})
				}
				
			},
			clickLeft() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.title{
	margin-top: 122rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 400;
	color: #666666;
}
.title1{
	margin-top: 10rpx;
	font-size: 60rpx;
	font-family: DINPro-Bold, DINPro;
	font-weight: 700;
	color: #3D3D3D;
}
.title2{
	margin-top: 10rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}
.phoneView{
	padding: 0 26rpx;
	margin: 0 60rpx;
	margin-top: 40rpx;
	height: 90rpx;
	background: #FFFFFF;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	opacity: 1;
	border: 2rpx solid #EEEEEE;
	input{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}
	.code{
		width: 160rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #26D360;
	}
	.line{
		width: 2rpx;
		height: 36rpx;
		background: #EEEEEE;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}
	
}
.button{
		margin:90rpx 60rpx;
		height: 90rpx;
		background: $base-color;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #FFFFFF;
	}
</style>
